<template>
    <li>
        <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)" />
        <span v-show='!todo.isEdit'>{{todo.title}}</span>
        <input type="text" v-show='todo.isEdit' :value="todo.title" @blur="handleBlur" ref="todoEditTitle" />
        <button @click="handleDelete(todo.id)">删除</button>
        <button @click="handleEdit">编辑</button>
    </li>
</template>

<script>
    export default {
        name : "MyItem",
        props:['todo'],
        methods:{
            handleCheck(id){
                this.$bus.$emit('updateCheckTodo',id)
            },
            handleDelete(id){
                this.$bus.$emit('deleteTodo',id)
            },
            handleEdit(){
                if(this.todo.hasOwnProperty("isEdit")){
                    this.todo.isEdit = true
                }else{
                    console.log('edit', this.todo)
                    this.$set(this.todo,'isEdit',true)
                }
                this.$nextTick(function(){
                    this.$refs.todoEditTitle.focus()
                });
            },
            handleBlur(e){
                console.log('blur', this.todo)
                this.todo.isEdit = false
                if(!e.target.value){
                    alert('err')
                    return
                }
            },
        },
    }
</script>

<style scoped>
   
</style>